<template>
  <div class="studentAdd">
    <div class="form">
      <a-button class="return" @click="back">返回</a-button>
      <h1>添加学生</h1>
      <ul>
        <li class="inputBox">
          <label for="">学号：</label
          ><input type="text" placeholder="请输入学生学号" v-model="id" />
        </li>
        <li class="inputBox">
          <label for="">姓名：</label>
          <input type="text" placeholder="请输入学生姓名" v-model="name" />
        </li>
        <li class="labelBox">
          <label class="classes" for="">班级：</label>
          <select v-model="class_id">
            <option
              v-for="(obj, index) in total_class"
              :key="index"
              :value="obj.class_id"
              >{{ obj.class_name }}</option
            >
          </select>
        </li>
        <li class="radioBox">
          <div class="sex">
            <label for="" style="font-size:17px">性别：</label>
            <input type="radio" value="0" v-model="sex" />男
            <input type="radio" value="1" v-model="sex" />女
          </div>
        </li>
        <li class="inputBox">
          <label for="">生日：</label>
          <input type="date" v-model="birth" />
        </li>
        <!-- <li>
          <label for="">密码：</label>
          <input type="password" placeholder="请输入密码" v-model="password" />
        </li>
        <li>
          <label for="">确认密码：</label>
          <input
            type="password"
            placeholder="再次输入确认密码"
            v-model="password2"
          />
        </li> -->
        <li class="infor">
          <span>{{ infor }}</span>
        </li>
        <li class="button">
          <a-button class="confirm" @click="register">确定</a-button>
          <a-button class="reset" @click="reset">重置</a-button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { request } from "../../api/index";
export default {
  name: "Register",
  data() {
    return {
      id: "",
      name: "",
      sex: "",
      class_id: "",
      birth: "",
      // password: "",
      // password2: "",
      total_class: [],
      infor: "",
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      request({ method: "get", url: "/class/class_view" }).then((res) => {
        this.total_class = res.data.class_all;
        console.log(this.total_class);
        this.class_id = this.total_class[0].class_id; //初始化班级
      });
    },
    reset() {
      (this.id = ""),
        (this.name = ""),
        // (this.password = ""),
        // (this.password2 = ""),
        (this.birth = ""),
        (this.class_id = ""),
        (this.sex = ""),
        (this.infor = "");
    },
    register() {
      if (
        this.id == "" ||
        this.name == "" ||
        // this.password == "" ||
        // this.password2 == "" ||
        this.birth == "" ||
        this.class_id == "" ||
        this.sex == ""
      ) {
        // this.infor = "信息输入不完整！";
        alert("信息输入不完整，请重新输入！")
      } else {
        request({
          method: "post",
          url: "user/register",
          data: {
            id: this.id,
            name: this.name,
            class_id: this.class_id,
            birthday: this.birth,
            sex: this.sex,
            password: "123456",
          },
        })
          .then((res) => {
            if (res.data.message == "success") {
              alert("添加成功！学生姓名是"+this.name+",学号是"+this.id+"，初始密码是123456");
              // this.$router.push("/start/login");
            }
          })
          .catch((err) => {
            alert("已存在有该学号的学生！");
          });
      }
    },
    back() {
      this.$router.push("/teaHome/checkClass");
    }
  },
};
</script>

<style scoped>
  *{
    /*初始化 清除页面元素的内外边距*/
	  padding: 0;
	  margin: 0;
	  /*盒子模型*/
	  box-sizing: border-box;
  }
  .studentAdd {
	  /*弹性布局 让页面元素垂直+水平居中*/
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  /*让页面始终占浏览器可视区域总高度*/
	  height: 100vh;
	  /*背景渐变色*/
  }
  .form {
    text-align: center;
    width: 40%;
    height: 65%;
    border: 5px solid aquamarine;
    border-radius:25px;
  }
  li {
    list-style: none;
  }
  ul li.inputBox input, .labelBox select {
  /* margin-left: 15px; */
  border-radius: 5px;
  height: 30px;
  width: 140px;
  margin-top: 20px;
  /* padding-left: 10px; */
  }
  .radioBox,.button,.return {
    margin-top: 20px;
  }
  .reset {
    margin-left: 25px;
  }
</style>